<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>汽车氛围灯合作</title>
		<link th:href="@{/css/smart_css/all.css}" rel="stylesheet" type="text/css" />
		<link th:href="@{/css/smart_css/style.css}" rel="stylesheet" type="text/css" media="all" />
		<link th:href="@{/css/smart_css/form.css}" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" th:href="@{/css/indexCss/index.css}" />
		<link rel="stylesheet" th:href="@{/css/indexCss/base.css}" />
		<script th:src="@{/js/indexJs/jquery-3.2.1.js}"></script>
		<script th:src="@{/js/contactus/jquery-validator/jquery.validate.min.js}"></script>
		<script th:src="@{/js/contactus/jquery-validator/messages_cn.js}"></script>
		<script th:src="@{/assets/layer/layer.js}"></script>
		<script type="text/javascript">
			$(function(){
				$("header").load("/eolane/f/t/header2"); /* 如果是电子制造服务导入common/header1.html，ODM客制化相关导入common/header2.html,以此类推 */
				$("footer").load("/eolane/f/t/footer"); /* 引入公共底部 */
				$(".rightxuanfu").load("/eolane/f/t/right"); /* 右侧悬浮框 */
			})
		</script>
		<style type="text/css">
			.sender {
				clear: both;
			}

			.sender div:nth-of-type(1) {
				float: left;
			}

			input[type="text"] {
				box-sizing: border-box;
				text-align: center;
				font-size: 1.4em;
				height: 2.7em;
				border-radius: 4px;
				border: 1px solid #c8cccf;
				color: #6a6f77;
				-web-kit-appearance: none;
				-moz-appearance: none;
				display: block;
				outline: 0;
				padding: 0 1em;
				text-decoration: none;
				width: 90%;
				margin-left: 5%;
			}

			input[type="button"] {
				box-sizing: border-box;
				text-align: center;
				font-size: 1.4em;
				height: 2.7em;
				border-radius: 4px;
				border: 1px solid #c8cccf;
				color: #6a6f77;
				-web-kit-appearance: none;
				-moz-appearance: none;
				display: block;
				outline: 0;
				padding: 0 1em;
				text-decoration: none;
				width: 90%;
				margin-left: 5%;
			}

			.sender div:nth-of-type(2) {
				background-color: aquamarine;
				float: left;
				margin: 0 20px 10px 15px;
				padding: 10px 10px 10px 0px;
				border-radius: 7px;
			}

			.receiver {
				clear: both;
			}

			.receiver div:nth-child(1) {
				float: right;
			}

			.receiver div:nth-of-type(2) {
				float: right;
				background-color: wheat;
				margin: 0 10px 10px 20px;
				padding: 10px 0px 10px 10px;
				border-radius: 7px;
			}

			.left_triangle {
				height: 0px;
				width: 0px;
				border-width: 8px;
				border-style: solid;
				border-color: transparent aquamarine transparent transparent;
				position: relative;
				left: -16px;
				top: 3px;
			}

			.right_triangle {
				height: 0px;
				width: 0px;
				border-width: 8px;
				border-style: solid;
				border-color: transparent transparent transparent wheat;
				position: relative;
				right: -16px;
				top: 3px;
			}

			.i_text {
				border: none;
				background-color: #F5DEB3;
				outline: none;
			}

			.i_sumbit {
				float: right;
				margin-top: 70px;
				margin-right: 10px;
			}

			.el-box-body p {}
		</style>
	</head>
	<body>
	<header style="background-color: white;"></header>
		<div>
			<!-- 图片 -->
			<div class="inside-inner">
				<img th:src="@{/images/about/inner-banner.jpg}" alt='Leader in PCB & Technical Parts' style="width: 100%;height: 240px;" />
			</div>
			<!-- 内容 start-->
			<div class="sep-mainbody">
				<div class="sep-container">
					<div class="sep-sidebar">
						<div class="sep-box">
							<div class='el-box' style="background-color: white;">
								<div class="el-box-heading">EMS</div>
								<div class="el-box-body" style="border-radius:10px;">
									<ul>
										<li>
											<a th:href="@{/f/t/smartF}">
												智慧工厂 </a>
										</li>
										<li>
											<a th:href="@{/f/t/smartC}">
												智慧城市 </a>
										</li>
										<li>
											<a th:href="@{/f/t/smartl}">
												汽车数字氛围灯 </a>
											<ul id="ul1">
												<li>
													<a th:href="@{/f/t/smartl}">氛围灯介绍</a>
												</li>
												<li>
													<a th:href="@{/f/t/smartCar}">氛围灯合作</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>

						<div class="sep-box el-box-c">
							<div class='el-box' style="background-color: white;">
								<div class="el-contact-box-heading">
									<img th:src="@{/images/about/contact.png}" alt='contact'>
								</div>
								<div class="foot-tel-center">
									<div style="font-size: 16px;font-weight: 400; line-height: 200%; margin-left: 20px; margin-top: 10px;">
										<p class="dt f14">&#9742; 服务热线：<br />
											<span>400-871-0521</span>
										</p>
										<p class="dt f14">&#9993; 公司邮箱：<br />
											<span>marketing@eolane.cn</span>
										</p>
										<br />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="sep-primary" style="background-color: white; min-height: 550px;">
						<div  align="center" style="font-size: 36px; color:#1B5EA2 ;">
							<p>&nbsp;</p>
						</div>
						<div  style="width: 400px;margin-left: 250px;">
							<form id="commentForm" method="post" style="font-size: 18px;">
								<p><input type="text" name="name" id="na1"  value="" placeholder="请输入您的名字" /><br /> </p>
								<p><input type="text" name="company" id="co1" value="" placeholder="请输入您的公司名称" /><br /> </p>
								<p><input type="text" name="telephone" id="te1" value="" placeholder="请输入您的联系电话" /><br /></p>
								<p><input type="text" name="email" id="em1" value="" placeholder="请输入您的电子邮箱" /><br /></p>
								<input type="button" value="提交" onclick="return checkall()" />
							</form>
						</div>


					</div>
				</div>

			</div>
		</div>
		<footer></footer>
		<div class="rightxuanfu"></div>
	</body>
	<script th:inline="javascript">
		/*<![CDATA[*/
		var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
		/*]]>*/
	</script>
	<script type="text/javascript">
		function checkall() {
			var name = $("#na1").val();
			var company = $("#co1").val();
			var telephone = $("#te1").val();
			var email = $("#em1").val();
			if(name == ""){
				layer.alert("姓名为必填项！")
				return false;
			}
			if(company == ""){
				layer.alert("公司名称为必填项！")
				return false;
			}if(telephone == ""){
				layer.alert("电话为必填项！")
				return false;
			}if(email == ""){
				layer.alert("邮箱为必填项！")
				return false;
			}
			sent2();
		}
	</script>

	<script type="text/javascript">

		function sent2() {
			//验证表单数据
			if ($("#commentForm").valid()) {
				//获取数据
				var data = $("#commentForm").serialize();
				$.ajax({
					url: contextPath + '/f/t/contactus3',
					data: data,
					type: "post",
					timeout : 40000,
					beforeSend : function() {
						var index = layer.load(2, {time: 1*1000});
					},
					complete : function() {

					},
					success: function (msg) {
						if(msg == "103"){
							layer.confirm('发送成功，我们将尽快和您取得联系！', {
								btn: ['确定'] //按钮
							}, function(){
								window.location.href =  contextPath + "/f/t/showmain";
							});
						} else{
							layer.alert('发送失败！', {icon: 2});
						}
					}
				});
			}
		}
	</script>

</html>
